<template>
<div id="AdditionalRole">
			<!--整体开始-->
			<div style="width:1200px; height: 60px; margin: auto;">
				<!--头部开始-->
				<div style="width: 1200px; height:40px;background-image: linear-gradient(to bottom,  rgb(211,211,211),rgb(245,245,245)); line-height: 40px;">
					&nbsp;&nbsp;<i class="el-icon-user-solid"></i>&nbsp;<span style="color: rgb(26,113,165); font-size: 17px; font-weight:900;">权限附加</span>
				</div>
				<!--头部结束-->
				<!--中间开始-->
				<div style="width: 1200px; height: 500px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin-top: 5px; ">

					<div style="display: -webkit-flex;width:1100px; margin: auto; padding-top: 20px;">

						<div style="width: 200px; height:450px;border-bottom: 2px solid #D9D9D9;border-top: 2px solid #D9D9D9;border-left: 2px solid #D9D9D9;margin-left: 50px;">
							<div style="width: 200px; height:30px; border-bottom: 2px solid #D9D9D9;  text-align: center;line-height: 30px;">
								<i class="el-icon-user"></i>&nbsp;<span style="font-size: 16px; font-weight: 900;">角色列表</span>
							</div>
							<el-tree style="margin-top: 10px; color:rgb(26,113,165) ;" :data="Role" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
						</div>

						<div style="width:800px; height:450px; border: 2px solid #D9D9D9;">

							<div style="width:800px; height:30px; border-bottom: 2px solid #D9D9D9;text-align: center;line-height: 30px;">
								<i class="el-icon-tickets"></i>&nbsp;<span style="font-weight: 800;font-size: 16px;">功能列表</span>
							</div>
							<div style="background-color: rgb(247,247,247); line-height: 50px;"><span style="font-size:16px;color: rgb(26,113,165); margin-left: 5px;font-weight: 200;">当前配置角色为:</span><span style="font-weight: 200; font-size:16px;color: red;">&nbsp;{{roleName}}</span>
								<el-button type="primary" style="margin-left: 450px;" @click="notarizeButton()">确定赋予权限</el-button>
							</div>

							<div style="width: 800px; height: 370px; overflow-wrap: break-word;overflow-y: scroll;">

							<div v-for="(temp,i) in JurisdictionVO" :key="i" style="width:795px; height:100px ; border-bottom: 1px solid #000000;display: -webkit-flex;">
									<div style="margin-left: 10px;">
										<template>
											<el-checkbox :indeterminate="temp.isIndeterminate" v-model="temp.checkAll" @change="ch(temp.parentPermissionId)"><span style="font-weight: 900;">{{temp.parentPermissionName}}</span></el-checkbox>
											<div style="margin: 15px 0;"></div>
											<el-checkbox-group v-model="temp.checkedCities">
												<el-checkbox v-for="(temp2) in temp.childRightsList"  :label="temp2.sonPermissionId" :key="temp2.sonPermissionId" @change="chs(temp2.parId)">{{temp2.sonPermissionName}}</el-checkbox>
											</el-checkbox-group>
										</template>
									</div>
								</div>
                           
							</div>
						</div>
					</div>
				</div>
				<!--中间结束-->
			</div>
			<!--整体结束-->
		</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {

	defaultProps: {
	children: 'children',
	label: 'jurisdictionname'
	},

	/**/
	JurisdictionVO: [],
	Role: [],
	FunctionVO: [],
	childRights: [],
	roleName:"请选择角色",
	roleid:""
};
},
//计算属性
computed: {},
//方法集合
methods: {
//查询角色功能
	queryFunction(id) {
		let _this = this;
		_this.$http.get(`http://localhost:8080/api/JurisdictionAction/queryFunction/${id}`).then(function (resp){
			_this.FunctionVO = resp.data;
			for(let i = 0; i < _this.JurisdictionVO.length; i++) {
			_this.JurisdictionVO[i].checkedCities = [];
		}
			for(let i = 0; i < _this.FunctionVO.length; i++) {
				for(let j = 0; j < _this.JurisdictionVO.length; j++) {
					if(_this.FunctionVO[i].uplv == _this.JurisdictionVO[j].parentPermissionId) {
						for(let k = 0; k < _this.JurisdictionVO[j].childRightsList.length; k++) {
							if(_this.FunctionVO[i].syfunctionid == _this.JurisdictionVO[j].childRightsList[k].sonPermissionId) {
								_this.JurisdictionVO[j].checkedCities.push(_this.JurisdictionVO[j].childRightsList[k].sonPermissionId);
							}
						}

					}
				}
			}
			for(let i = 0; i < _this.JurisdictionVO.length;i++) {
				if(_this.JurisdictionVO[i].checkedCities.length == _this.JurisdictionVO[i].childRightsList.length) {
					_this.JurisdictionVO[i].checkAll = true;
					_this.JurisdictionVO[i].isIndeterminate = false;
				} else if(_this.JurisdictionVO[i].checkedCities.length < _this.JurisdictionVO[i].childRightsList.length && _this.JurisdictionVO[i].checkedCities != "") {
					_this.JurisdictionVO[i].isIndeterminate = true;
				}else if(_this.JurisdictionVO[i].checkedCities.length < _this.JurisdictionVO[i].childRightsList.length && _this.JurisdictionVO[i].checkedCities == ""){
					_this.JurisdictionVO[i].checkAll = false;
					_this.JurisdictionVO[i].isIndeterminate = false;
				}
			}

		});
	},
	//查询角色
	queryRole() {
		let _this = this;
		_this.$http.get(`http://localhost:8080/api/JurisdictionAction/queryRole`).then(function (resp){
			_this.Role = resp.data;

		});
	},

	//查询父级权限下的子权限
	queryJurisdictionFunction() {
		let _this = this;
	_this.$http.get(`http://localhost:8080/api/JurisdictionAction/queryJurisdictionFunction`).then(function (resp){
			_this.JurisdictionVO = resp.data;
			for(let i = 0; i < _this.JurisdictionVO.length; i++) {
				_this.JurisdictionVO[i].checkedCities = [];
				_this.JurisdictionVO[i].isIndeterminate = true;
				_this.JurisdictionVO[i].checkAll = false;

				if(_this.JurisdictionVO[i].checkedCities == "") {
					//this.arr[i].checkAll=false;
					_this.JurisdictionVO[i].isIndeterminate = false;
				} else {
					//this.arr[i].checkAll=true;
					_this.JurisdictionVO[i].isIndeterminate = true;
				}
			}
			console.info(JSON.stringify(_this.JurisdictionVO));

		});
	},

	handleNodeClick(data) {
		this.roleName=data.jurisdictionname;
		this.roleid=data.jurisdictionid;
		this.queryFunction(data.jurisdictionid);

	},

	/*多选框*/
	ch(val) {
		for(let i = 0; i < this.JurisdictionVO.length; i++) {
			if(this.JurisdictionVO[i].parentPermissionId == val) {
				if(this.JurisdictionVO[i].checkAll) {
					let newCheckedCities = [];
					for(let j = 0; j < this.JurisdictionVO[i].childRightsList.length; j++) {
						newCheckedCities[j] = this.JurisdictionVO[i].childRightsList[j].sonPermissionId;
					}
					this.JurisdictionVO[i].checkedCities = newCheckedCities;
					this.JurisdictionVO[i].isIndeterminate = false;
				} else {
					this.JurisdictionVO[i].checkedCities = [];
				}
			}
		}

	},
	chs(id) {
		for(let i = 0; i < this.JurisdictionVO.length; i++) {
			if(this.JurisdictionVO[i].parentPermissionId == id) {
				if(this.JurisdictionVO[i].checkedCities.length == this.JurisdictionVO[i].childRightsList.length) {
					this.JurisdictionVO[i].checkAll = true;
					this.JurisdictionVO[i].isIndeterminate = false;
				} else if(this.JurisdictionVO[i].checkedCities.length < this.JurisdictionVO[i].childRightsList.length && this.JurisdictionVO[i].checkedCities != "") {
					this.JurisdictionVO[i].checkAll = false;
					this.JurisdictionVO[i].isIndeterminate = true;
				} else if(this.JurisdictionVO[i].checkedCities.length < this.JurisdictionVO[i].childRightsList.length && this.JurisdictionVO[i].checkedCities == "") {
					this.JurisdictionVO[i].checkAll = false;
					this.JurisdictionVO[i].isIndeterminate = false;
				}
			}
		}

	},
	notarizeButton() {
		let _this=this;
		if(this.roleName=="请选择角色"){
			_this.$message.error('错了哦，请选择角色!!');
			return;
		}
		let arrss = [];
		for(let i = 0; i < this.JurisdictionVO.length; i++) {
			arrss = arrss.concat(this.JurisdictionVO[i].checkedCities)
		}
		_this.$http.post(`http://localhost:8080/api/JurisdictionAction/addJurisdiction/${_this.roleid}`,arrss).then(function (resp){
			if(resp.data.code=="200"){
				_this.$message({
					message: '恭喜你，赋予成功!!',
					type: 'success'
				});
			}else{
				_this.$message.error('错了哦，赋予失败!!');
			}
		});
	}
},
//挂载完成（可以访问DOM元素）
mounted() {
	/**/
	this.queryJurisdictionFunction();
	/**/
	this.queryRole();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
/* 设置滚动条的样式 */

	::-webkit-scrollbar {
		width: 3px;
	}
	/* 滚动槽 */

	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
		border-radius: 10px;
	}
	/* 滚动条滑块 */

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 1);
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(255, 0, 0, 0.4);
	}
</style>